<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layOut="http://www.w3.org/1999/xhtml"
      layOut:decorator="layOut/layOut">
<head>
    <title>角色新增</title>
    <style>
        .main-container .layui-form-item {
            padding-right: 45px;
        }
    </style>
</head>
<body>
<form class="layui-form" id="theForm">
    <div class="mainBox" th:fragment="theForm">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label" for="name">角色名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" th:value="${role.name}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="code">角色码</label>
                <div class="layui-input-block">
                    <input type="text" name="code" id="code" th:value="${role.code}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" for="introduction">介绍</label>
                <div class="layui-input-block">
                    <input type="text" name="introduction" id="introduction" th:value="${role.introduction}" lay-verify="title"
                           autocomplete="off" placeholder="请输入" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom" th:fragment="theBtn">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="completeFilter">
                <i class="layui-icon layui-icon-ok"></i>提交
            </button>
        </div>
    </div>
</form>
<script type="text/javascript">
    layui.use(['form','jquery'], function() {
        let form = layui.form;
        let $ = layui.jquery;

        form.on('submit(completeFilter)', function(data) {
            var fromData = $("#theForm").serialize();
            $.post("/role/saveOrUpdate" ,fromData ,function (data) {
                if (data.status === 200) {
                    console.log("成功返回")
                }
                layer.msg(data.msg, {
                    icon: 1,       //信息框与加载层的私有参数
                    time: 1500     //意思是2.5秒后自动关闭
                }, function () {   //关闭弹出框后执行的函数
                    console.log("后端返回" + data.msg)
                });
            });
            return false;
        });
    })
</script>
</body>
</html>